import React, { useEffect, useState } from 'react';
import Swiper, { Pagination } from "swiper";
import 'swiper/swiper-bundle.min.css';
import { SliderContainer } from "./style";
Swiper.use([ Pagination ]);

function Slider(props) {

    const [sliderSwiper, setSliderSwiper] = useState (null);

    const { bannerList } = props;

    useEffect (() => {
        if (bannerList.length && !sliderSwiper){
            let newSliderSwiper = new Swiper(".slider-container", {
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: {el:'.swiper-pagination'},
            });
            setSliderSwiper(newSliderSwiper);
        }
    }, [bannerList.length, sliderSwiper]);

    return (
        <SliderContainer>
            <div className="before" />
            <div className='slider-container'>
                <div className='swiper-wrapper'>
                    {
                        bannerList.map((item, index) => {
                            return(
                                <div className='swiper-slide' key={index}>
                                    <div className='slider-nav'>
                                        <img src={item.imageUrl} width="100%" height="100%" alt="推荐" />
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </SliderContainer>
    )
}

export default React.memo(Slider)
